Redux Toolkit을 설치해 createStore 대신 configureStore를 사용하자.
Redux Toolkit(RTK)
Redux Toolkit(RTK)은 리덕스에서 권장하는 도구 모음으로, 리덕스가 가진 세 가지 주요 문제점을 해결하기 위해 만들어졌다.
🎯 Redux의 주요 문제점
- 복잡한 store 구성
- 유용한 작업을 위해 많은 패키지를 추가해야 하는 번거로움
- 너무 많은 상용(boilerplate) 코드
리덕스 툴킷을 사용하면 간단한 코드로 좋은 리덕스 앱을 쉽고 빠르게 개발할 수 있다.
redux toolkit 설치
아래 명령어로 redux toolkit을 설치할 수 있다.
$ yarn add @reduxjs/toolkit
createStore
기존 리덕스에서는 store를 생성하는 함수로 createStore를 사용한다. 그러나 실제 코드를 작성하면 아래와 같이 createStore에 취소선이 그어지는 것을 볼 수 있다.
마우스를 올려보면 툴팁으로 @reduxjs/toolkit 패키지의 configureStore 함수를 사용하라고 권장하는 내용이 표시된다.
createStore 취소선
createStore에 표시된 취소선은 단지 시각적인 효과일 뿐, 코드 동작 방식에는 영향을 미치지 않는다. 무시해도 문제가 발생하지 않는다는 것이다.
취소선을 제거하려면 권장하는 대로 리덕스 툴킷을 사용하면 되지만, 간단하게 별칭으로도 없앨 수 있다.
createStore에 별칭으로 legacy_createStore를 붙여주면 된다. @deprecation 태그가 없을 뿐이지 동일한 기능을 한다.
import { legacy_createStore as createStore } from 'redux';
const store = createStore(reducer);
configureStore
이제 리덕스가 권장하는 대로 configureStore를 사용하여 createStore를 대체해보자.
import { configureStore } from '@reduxjs/toolkit';
// ...
const rootReducer = {
todos: todosReducer,
filters: filtersReducer,
};
const store = configureStore({
reducer: rootReducer,
middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
devTools: process.env.NODE_ENV !== 'production',
});
createStore와의 다른 점은 매개변수에 맞게 해당 값들을 넣어줘야 한다는 것이다.
reducer가 여러 개인 경우 combineReducers를 직접 호출하지 않아도 configureStore에서는 자동으로 호출하여 하나의 리듀서로 묶어준다.
References
